<template>
  <div>
    <el-card class="box-card el-card-flex approve" v-show="test">
    <div slot="header" class="clearfix">
			<span>
				<i class="el-icon-user"></i>
				待办列表
			</span>
		</div>
    <!-- 表单 -->
    <div class="text item">
     <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待办" name="first">
        <el-table :data="tableData" border height="100%" stripe>
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column show-overflow-tooltip prop="username" label="单据编号"></el-table-column>
          <el-table-column show-overflow-tooltip prop="email" label="待办标题">
            <template slot-scope="scope">
              <a @click="changes" class="buttonText">{{scope.row.email}}</a>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="user_type" label="提交人"></el-table-column>
          <el-table-column show-overflow-tooltip prop="created_time" label="当前节点"></el-table-column>
          <el-table-column show-overflow-tooltip prop="account_expired_date" label="当前节点审批人"></el-table-column>
          <el-table-column show-overflow-tooltip prop="status" label="上级节点"></el-table-column>
          <el-table-column show-overflow-tooltip prop="name" label="上级节点审批人"></el-table-column>
          <el-table-column show-overflow-tooltip prop="start_valid_date" label="摘要"></el-table-column>
          <el-table-column show-overflow-tooltip prop="control" label="操作" width="100" fixed="right">
            <template slot-scope="scope">
                <el-button type="text" icon="el-icon-circle-check" title="通过" @click="handleEdit(scope.$index, scope.row)"></el-button>
              </template>
            </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已办" name="second">
        <el-table :data="tableData1" border height="100%" stripe>
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column show-overflow-tooltip prop="username" label="单据编号"></el-table-column>
          <el-table-column show-overflow-tooltip prop="email" label="待办标题"></el-table-column>
          <el-table-column show-overflow-tooltip prop="user_type" label="提交人"></el-table-column>
          <el-table-column show-overflow-tooltip prop="created_time" label="当前节点"></el-table-column>
          <el-table-column show-overflow-tooltip prop="account_expired_date" label="当前节点审批人"></el-table-column>
          <el-table-column show-overflow-tooltip prop="status" label="上级节点"></el-table-column>
          <el-table-column show-overflow-tooltip prop="name" label="上级节点审批人"></el-table-column>
          <el-table-column show-overflow-tooltip prop="start_valid_date" label="摘要"></el-table-column>
          <el-table-column show-overflow-tooltip prop="control" label="操作" width="100" fixed="right">
            <template slot-scope="scope">
                <el-button type="text" icon="el-icon-delete" title="删除" @click="handleDel(scope.$index, scope.row)"></el-button>
              </template>
            </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    </div>
  </el-card>
  
  </div>
</template>


<script>
import {Tabs, TabPane, Dialog, Table, TableColumn, Pagination, MessageBox, Message} from "element-ui";
  export default {
	  name:'',
	  components: {
		"el-tab": Tabs, //标签页
		"el-tab-pane": TabPane, //标签页
		"el-table-column": TableColumn, //表格列
		"el-pagination": Pagination, //分页
    "el-dialog": Dialog, //对话框
    "el-table":Table,
		"el-pagination": Pagination //分页
	},
    data() {
      return {
		activeName: 'first',
    tabPosition: 'left',
    test:true,
    test1:false,
    opinion:'',
    editForm:{
        dictId:'组织',
        data:'2019-07-08',
        code:'ZM001',
        project:'项目01',
        phase:'项目第一阶段',
        implement:'第一阶段',
        content:'通过',
        opinion:'通过',
      },
		formInline: {
          user: '',
          region: ''
        },
		 tableData: [
            { 
              username: "ZM001",
              email: "财务部",
              edit: "测试",
              user_type: "王五",
              created_time: "当前节点",
              account_expired_date: "王小虎",
              status: "上级节点",
              name: "张三",
              start_valid_date:"出差审批"
          },
           { 
              username: "ZM001",
              email: "财务部",
              edit: "测试",
              user_type: "王五",
              created_time: "当前节点",
              account_expired_date: "王小虎",
              status: "上级节点",
              name: "张三",
              start_valid_date:"出差审批"
          },
           { 
              username: "ZM001",
              email: "财务部",
              edit: "测试",
              user_type: "王五",
              created_time: "当前节点",
              account_expired_date: "王小虎",
              status: "上级节点",
              name: "张三",
              start_valid_date:"出差审批"
          },
           { 
              username: "ZM001",
              email: "财务部",
              edit: "测试",
              user_type: "王五",
              created_time: "当前节点",
              account_expired_date: "王小虎",
              status: "上级节点",
              name: "张三",
              start_valid_date:"出差审批"
          },
           { 
              username: "ZM001",
              email: "财务部",
              edit: "测试",
              user_type: "王五",
              created_time: "当前节点",
              account_expired_date: "王小虎",
              status: "上级节点",
              name: "张三",
              start_valid_date:"出差审批"
          }
       ],
       tableData1: [
            { 
              username: "ZM001",
              email: "财务部",
              edit: "测试1",
              user_type: "王五",
              created_time: "当前节点",
              account_expired_date: "王小虎",
              status: "上级节点",
              name: "张三",
              start_valid_date:"出差审批1"
          }
       ]
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleEdit(index){
        Message.success('审批成功'); //成功提示
          this.tableData.splice(index, 1);
      },
      handleDel(index){
          this.tableData.splice(index, 1);
          Message.success('删除成功'); //成功提示
      },
      changes(){
        this.$router.addRoutes([
                {
            path: '/approval',
            name: 'approval',
            component: () => import('@/views/workflow/approve/approval'),
          },
        ])
        this.$router.push({
          path:'./approval',
          // query: {
          //   userId: '1'
          // }
        })
      },
    }
  };
</script>
<style>
.approve .el-tabs__nav{
	    float: right;
}
.el-table__body-wrapper{
  height: 100%;
}
.buttonText{
  cursor: pointer;
}
</style>
